<template>
  <div class="app-container group_container">
    <div v-if="showGroupList">
      <el-row>
        <el-col :span="6"><el-input v-model="searchGroupName" :placeholder="$t('product.searchName')" /></el-col>
        <el-col :span="4" :offset="1"><el-button :loading="searchLoading" type="primary" plain @click="handleSearchBtn">{{ $t('product.search') }}</el-button></el-col>
      </el-row>
      <el-row style="margin: 20px 0;">
        <el-button icon="el-icon-plus" type="primary" plain @click="handleAddGroupBtn">{{ $t('product.createGroupTitle') }}</el-button>
      </el-row>
      <tab-pane
        ref="relationDom"
        v-loading="tableLoading"
        :list-query="listQuery"
        :table-label="tableLabel"
        :table-data="tableData"
        @create="showCreatedTimes"
        @handleRelationProduct="handleEvent"
        @updateThing="handleUpdateGroup"
        @getListThing="getGroupList"
      />
    </div>
    <div v-else>
      <div style="margin-bottom: 30px">
        <el-button style="margin-right: 20px" type="primary" plain @click="handleReturnList">{{ $t('product.returnGroupList') }}</el-button>
        <el-button type="primary" :loading="saveLoading" @click="handleSave">{{ $t('product.save') }}</el-button>
      </div>
      <el-transfer
        v-model="selectedProducts"
        :titles="[$t('product.relationProductNo'),$t('product.relationProductYes')]"
        :data="unselectedProducts"
        @change="handleChange"
      />
    </div>
    <!-- 新建分组 -->
    <el-dialog
      :title="$t('product.createGroup')"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form ref="groupForm" :model="queryParams" :rules="rules" label-width="80px">
        <el-form-item :label="$t('product.groupName')" prop="groupName">
          <el-input v-model="queryParams.groupName" :placeholder="$t('product.createGroptNameTip')" />
        </el-form-item>
        <el-form-item :label="$t('product.groupDesc')">
          <el-input v-model="queryParams.groupDesc" />
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">{{ $t('product.cancle') }}</el-button>
          <el-button type="primary" :loading="createLoading" @click="handleCreateGroup">{{ $t('product.createConfirm') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import TabPane from '@/views/tab/components/TabPane'
import { groupList, groupAdd, groupUpdate, groupRelationList, productRelation } from '@/api/product'
export default {
  name: 'GroupList',
  components: {
    TabPane
  },
  data() {
    var self = this
    return {
      tableData: [
        {
          id: 1,
          groupName: 666,
          groupDesc: '商品名称',
          productNum: '分类'
        },
        {
          id: 2,
          groupName: 666,
          groupDesc: '商品名称',
          productNum: '分类'
        }
      ],
      tableLabel: [
        {
          label: self.$t('product.groupName'),
          key: 'groupName',
          isEditor: true
        },
        {
          label: self.$t('product.groupDesc'),
          key: 'groupDesc',
          isEditor: true
        },
        {
          label: self.$t('product.productNum'),
          key: 'productNum',
          isEditor: false
        },
        {
          label: self.$t('product.productTableTitleOpration'),
          key: 'opration',
          type: 'group'
        }
      ],
      dialogVisible: false,
      createLoading: false,
      queryParams: {
        groupName: '',
        groupDesc: ''
      },
      rules: {
        groupName: [
          { required: true, message: this.$t('product.createGroptNameErrorTip'), trigger: 'blur' }
        ]
      },
      showGroupList: true,
      unselectedProducts: [],
      selectedProducts: [],
      saveLoading: false,
      searchGroupName: '',
      searchLoading: false,
      listQuery: {
        limit: 5,
        page: 1,
        total: 0
      },
      tableLoading: false,
      groupId: ''
    }
  },
  mounted() {
    this.getGroupList()
  },
  methods: {
    // 关联商品列表
    groupRelationListData() {
      var self = this
      groupRelationList(this.groupId).then(res => {
        var FinalData = []
        var unSelect = res.data.unselectedProducts
        var select = res.data.selectedProducts

        unSelect.forEach(item => {
          var obj = {
            label: item.title,
            key: item.id
          }
          FinalData.push(obj)
        })
        self.selectedProducts = []
        select.forEach(item => {
          var obj = {
            label: item.title,
            key: item.id
          }
          FinalData.push(obj)
          self.selectedProducts.push(item.id)
        })
        self.unselectedProducts = FinalData
        self.showGroupList = false
      }).catch(error => {
        console.log(error)
      })
    },
    // 分组列表
    getGroupList() {
      var self = this
      this.tableLoading = true
      var param = {
        pageNo: this.listQuery.page - 1,
        pageSize: this.listQuery.limit,
        groupName: this.searchGroupName
      }
      console.log('分组===》参数', param)
      var data = []
      groupList(param).then(res => {
        self.listQuery.total = res.data.total
        self.listQuery.limit = res.data.pageSize
        res.data.contents.forEach(item => {
          var obj = {
            groupName: item.groupName,
            id: item.id,
            groupDesc: item.groupDesc,
            productNum: item.products.length

          }
          data.push(obj)
        })
        self.tableData = data
        self.tableLoading = false
        self.searchLoading = false
      }).catch(error => {
        console.log(error)
        self.tableLoading = false
        self.searchLoading = false
      })
    },
    showCreatedTimes() {
      return
    },
    handleChange() {
      console.log(232132323, this.selectedProducts)
    },
    // 添加分组弹框
    handleAddGroupBtn() {
      this.dialogVisible = true
    },
    // 新建分组
    handleCreateGroup() {
      var self = this
      this.$refs.groupForm.validate((valid) => {
        if (valid) {
          self.createLoading = true
          var obj = {
            groupDesc: self.queryParams.groupDesc,
            groupName: self.queryParams.groupName,
            shopId: localStorage.getItem('shopId')
          }
          groupAdd(obj).then(res => {
            console.log('添加', res)
            self.createLoading = false
            self.dialogVisible = false
            self.getGroupList()
          }).catch(error => {
            console.log(error)
            self.createLoading = false
          })
        } else {
          return false
        }
      })
    },
    // 修改商品分组
    handleUpdateGroup(data) {
      var self = this
      this.tableLoading = true
      var obj = {
        id: data.id,
        groupDesc: data.groupDesc,
        groupName: data.groupName
      }
      groupUpdate(obj).then(res => {
        self.getGroupList()
      }).catch(error => {
        console.log(error)
      })
    },
    // 返回列表
    handleReturnList() {
      this.showGroupList = true
      this.getGroupList()
    },
    // 保存
    handleSave() {
      var obj = {
        id: this.groupId,
        productIds: this.selectedProducts
      }
      productRelation(obj).then(res => {
        console.log('保存=======》', res)
      })
    },
    // 管理商品
    handleEvent(data) {
      this.groupId = data.id
      this.groupRelationListData()
      this.tableLoading = true
    },
    // 搜索
    handleSearchBtn() {
      console.log(this.searchGroupName)
      this.searchLoading = true
      this.getGroupList()
    }
  }
}
</script>

<style>
.rowStyle:first-child {
  margin-bottom: 20px;
}
.rowStyle {
  height: 50px;
  line-height: 50px;
}
.rowStyle .el-input__inner {
  height: 50px!important;
}
.el-transfer-panel {
  width: 22%;
  height: 350px;
}
</style>
